<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        模板语法的响应式丢失问题
            1. 数据仓库中的对象，初始定义时未描述的属性在后续的运行过程中进行添加，将不会具有响应式劫持特性
                    vue2 的响应式仓库是在初始化时完成数据劫持操作的
                    vue2 提供vue实例方法 $set 可以手动完成响应式数据的手动添加操作
                                this.$set(targetObj,propName,propValue);
                                    - targetObj 添加响应属性的目标对象
                                    - propName 添加的属性名
                                    - propValue 添加的属性值
                    指令 v-model 完成的变量绑定，如果初始时未定义【不具有响应式特性】，
                                **首次操作**v-model标签时，该指令会自动完成变量的响应式生成；
            2. 数据仓库中的数组，在初始的响应式劫持时，不会对内部的每个元素完成递归劫持操作【数组内的元素默认不会被劫持】
                    => 所以vue中对数据的下标操作是不会触发响应式的
                    => vue通过重写数组的原型方法，让数组的原型方法具有响应式 【数组变更方法】
                        被修改的方法包含了 触发 页面渲染的监听功能 【 vue 语法中尽量在操作数组时不要使用下标 】
                        模板语法中 v-model 和相关指令操作数组下标是具有响应式的 【 v-model和相关指令具有响应式 】
        </pre>
        <pre>{{ user }}</pre>
        <input v-model="user.name" type="text" />
        <br>
        <input type="button" value="添加年龄" @click="addAgeItem()">
        <input v-model.number="user.age" type="number" />
        <br>
        <input type="button" value="添加num" @click="addNumItem()">
        <hr>
        <pre>{{ arr }}</pre>
        <input type="button" value="打印this" @click="printThis()">
        <br><br>
        <input type="button" value="修改下标0的数据" @click="changeArr0()">
        <input type="button" value="添加新元素" @click="addArrNewItem()">
        <ul>
            <li v-for=" (item,i) in arr ">
                <input type="text" v-model="arr[i]">
            </li>
        </ul>
    </div>
    <script type="module">
        let push = Array.prototype.push;

        import Vue from "../assets/vue2/vue.esm.browser.js";
        new Vue({
            el:"#app",
            data() {
                return {
                    user:{
                        name:"tom"
                    },
                    arr:[1,2,3,4,5]
                }
            },
            methods: {
                addAgeItem() {
                    this.user.age = 23;
                    console.log(this)
                },
                addNumItem(){
                    this.$set(this.user,"num",100)
                },
                printThis(){
                    console.log(this)
                },
                changeArr0(){
                    this.arr[0] = 1111;
                },
                addArrNewItem(){
                    // this.arr[this.arr.length] = 2222;
                    console.log( this.arr.push == push )
                    this.arr.push(22222)
                }
            },
        })
    </script>
</body>
</html>